---
id: column-resize
title: 拖拽调整列宽
---

在表头的右侧放置一个「把手」，允许用户拖动把手来调整该列的宽度。

### 示例

```jsx live
function Demo() {
  const dataSource = assets.biz.dataSource6
  const columns = assets.biz.columns6

  const pipeline = useTablePipeline({ components: fusion })
    .input({ dataSource, columns })
    .use(
      features.columnResize({
        fallbackSize: 120,
        handleBackground: '#ddd',
        handleHoverBackground: '#aaa',
        handleActiveBackground: '#89bff7',
      }),
    )

  return <BaseTable {...pipeline.getProps()} />
}
```

### 使用方式

```jsx
pipeline.use(features.columnResize(options))
```

options 结构如下：

```ts
export interface ColumnResizeFeatureOptions {
  /** 非受控用法：默认的列宽数组 */
  defaultSizes?: number[]

  /** 受控用法：列宽数组 */
  sizes?: number[]
  /** 受控用法：修改宽度的回调函数 */
  onChangeSizes?(nextSizes: number[]): void

  /** 列的最小宽度，默认为 60 */
  minSize?: number
  /** 如果列宽数组中没有提供有效的宽度，fallbackSize 将作为该列的宽度，默认为 150 */
  fallbackSize?: number
  /** 列的最大宽度，默认为 1000 */
  maxSize?: number

  /** 是否在调整列宽时禁用 user-select，默认为 true */
  disableUserSelectWhenResizing?: boolean

  /** 把手的背景色 */
  handleBackground?: string
  /** 鼠标悬停时，把手的背景色 */
  handleHoverBackground?: string
  /** 把手激活时的背景色 */
  handleActiveBackground?: string
}
```

### 注意点

- 为叶子节点设置列宽才会生效，非叶节点的列宽由其子节点宽度累加得到
  - 拖动叶子节点时，「拖动的距离」等于「宽度变化量」
  - 拖动非叶节点时，「拖动的距离」会分给「子节点」，越宽的子节点 会分到更多的距离
- 使用 columnResize 时， columnResize 总是会算出一个列宽数组 `sizes`，并将其作为作为每一个叶子节点的实际宽度
  - 如果你提供了 `options.sizes`，则使用该数组作为 sizes
  - 否则使用 pipeline 内部的非受控状态作为 sizes，你可以通过 `options.defaultSizes` 指定非受控状态的默认值
  - 当 sizes 数组过短时（例如表格实际包含 4 列，但 sizes 的长度只有 2），会使用 `column.width` 来进行填充，如果某一列没有设置 width，则使用 `options.fallbackSize` 来填充宽度。
  - 使用 columnResize 后， `BaseTableProps#defaultColumnWidth` 会失效
  - **总之，在拖动之前，对于 columnResize 来说，所有的列的宽度都是已知的**
- 拖动时，一列的宽度只能在 `options.minSize` 至 `options.maxSize` 之间

默认情况下，把手是透明的，你可以通过 `options.handleBackground` 来为把手设置背景色。
